<template>
  <div>
    <div
      class="infinite-list-wrapper news_list"
      :style="{ overflow: 'auto', height: height + 'px' }"
    >
      <ul
        v-infinite-scroll="load"
        infinite-scroll-disabled="loading"
        infinite-scroll-delay="200"
        infinite-scroll-distance="15"
      >
        <li
          v-for="(item, index) in list"
          :key="index"
          class="f-cb"
          @click="list_children(item)"
        >
          <!--@click="list_children(item)"-->
          <p>{{ item.article_title }}</p>
          <p class="timer">{{ item.article_date }}</p>
        </li>
      </ul>
      <p v-if="loading && !noMore" class="more">{{ $t("m.Loading") }}</p>
      <p v-if="noMore" class="more">{{ $t("m.No_more") }}</p>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="720px"
      :modal="true"
      :modal-append-to-body="false"
      custom-class="news_dialog"
      class="tip_dialog"
    >
      <div>
        <!-- <iframe :src="url" frameborder="0" width="100%" height="500px"></iframe> -->
        <h2>{{ newsInfoData.article_title }}</h2>
        <h3>
          <span>
            {{ newsInfoData.article_date }}
          </span>
          <span>
            {{ newsInfoData.article_auth }}
          </span>
        </h3>
        <div class="newsInfoDataHeight">
          <div class="content" v-html="newsInfoData.article_content"></div>
          <div class="tishi">
            {{$t('info.info_news.56hz84vghyw0')}}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {get_stock_basic_news} from '@/assets/js/API/info.js';
import {get_newsInfo} from '@/assets/js/API/info.js';
export default {
  props: ["infoCode", "height", "RefreshIndex"],
  data() {
    return {
      list: [],
      url: "",
      dialogVisible: false,
      loading: true,
      noMore: false,
      submit: {
        symbol: null,
        market: null,
        securityType: null,
        page: 1,
        pageSize: 20,
        // platform:"PC"
      },
      totalSize: 20,
      totalPage: 1,
      url: "",
      newsInfoData: {},
    };
  },
  mounted() {
    this.submit = {
      symbol: this.StockData.symbol,
      market: this.StockData.market,
      securityType: this.StockData.securityType,
      page: 1,
      pageSize: 20,
      // platform:"PC"
    };
    this.getdata();
  },
  methods: {
    list_children(item) {
      this.url = item.url;
      this.dialogVisible = true;
      this.newsInfos(item.id);
      //window.open(item.url, "_blank");
    },
    async getdata() {
      if (!this.noMore) {
        const res = await get_stock_basic_news(this.submit);
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.length > 0) {
          this.list = [...this.list, ...res.data.list];
          this.submit.page++;
          // this.totalSize = res.data.list.totalCount;
          // this.totalPage = res.data.list.currentPage;
        } else {
          this.noMore = true;
        }
          this.loading = false;
          console.log(this.list,this.loading,this.noMore,"正值")
      }
    },
    load() {
      this.loading = true;
      if (this.infoCode !== "") {
        this.getdata();
      }
    },
    newsInfos(id) {
      var _this = this;
        get_newsInfo({ id: id }).then(function (res) {
          if (res.code == 1) {
            _this.newsInfoData = res.data[0];
          } else {
            _this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  watch: {
    // infoCode(val) {
    //   if (val !== "") {
    //     //  consoel.log(val,'Details_data2')
    //     this.submit.page = 1;
    //     this.submit.symbol = val.symbol;
    //     this.submit.market = val.market;
    //     this.submit.securityType = val.securityType;
    //     this.list = [];
    //     this.getdata();
    //   }
    // },
    RefreshIndex(val) {
      if (val !== "") {
        this.submit = {
          symbol: this.infoCode.symbol,
          market: this.infoCode.market,
          securityType: this.infoCode.securityType,
          page: 1,
          pageSize: 20,
          // platform:"PC"
        };
        console.log(val,"刷新页")
        this.list = [];
        this.getdata();
      }
    },
    StockData: {
      handler(val,old) {
        if(old != undefined) {
          this.submit = {
            symbol: val.symbol,
            market: val.market,
            securityType: val.securityType,
            page: 1,
            pageSize: 20,
            // platform:"PC"
          };
        }
      },
      deep: true,
      immediate: true,
    }
  },
  computed: {
    StockData() {
      return this.$store.state.index.StockData;
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/less/tip_dialog";
.news_list {
  box-sizing: border-box;
  ul {
    padding: 15px 0;
    min-width: 860px;
  }
  li {
    display: block;
    font-size: 12px;
    color: @fff;
    cursor: pointer;
    padding: 9px 20px;
    border-bottom: 1px solid @LightBorderLine;
    a {
      display: block;
      color: @fff;
    }
    p {
      width: 100%;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      float: left;
    }
    p.timer {
      color: @fbSix;
    }
  }
  .more {
    color: @fff;
  }
}
::v-deep .news_dialog {
  background: @borderColor;
  border-radius: 3px;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .el-dialog__title {
    color: @fff;
  }
  .el-dialog__body {
    h2 {
      font-size: 16px;
      text-align: center;
      color: @fff;
      line-height: 24px;
      padding: 10px 16px 10px 0;
    }
    h3 {
      font-size: 12px;
      color: @fbSix;
      line-height: 20px;
      text-align: center;
    }
    .newsInfoDataHeight {
      margin: 15px 0 0;
      height: 400px;
      overflow: auto;
    }
    .content {
      margin-right: 16px;
      color: @fbSix;
      font-size: 14px;
      p {
        font-size: 12px;
        color: @fbSix;
        line-height: 22px;
      }
      img {
        max-width: 100%;
        height: auto !important;
      }
    }
    .tishi {
      margin-right: 16px;
      border: 1px solid @LightBorderLine;
      padding: 14px 12px;
      margin-top: 30px;
      font-size: 12px;
      color: @fbSix;
      line-height: 22px;
    }
  }
}
</style>